// 库存管理系统主页
import React, { Component } from 'react'
import './style/System.scss' ;
// 路由组件
import {
    HashRouter as Router,
    Switch,
    Route,
    NavLink
} from "react-router-dom";
// 页面组件
import Home from '../Home/Home'
// 商品信息录入
import InfoEbtry from '../InfoEbtry/InfoEbtry'
// 库存信息管理
import InventoryInfo from '../InventoryInfo/InventoryInfo'
// 联系管理员
import Administrator from '../Administrator/Administrator'
// 小图标
import {FileSubmoduleIcon,SignOutIcon,PeopleIcon,PencilIcon,ProjectIcon,VersionsIcon} from '@primer/octicons-react'
export default class System extends Component {
    constructor(props){
        super(props)
        this.state={
            nickname:sessionStorage.getItem('nickname')
        }
    }
    
        
    
    render() {
        return (
            <Router>
            <div className="System">
                <div className="System_nav">
                    <h1><VersionsIcon size={36}/>库存管理系统</h1>
                    <h1>你好,
                    <button
                    onClick={this.props.Orthos}
                    > { this.state.nickname } </button>！
                    </h1>
                </div>
                <div className="System_content">
                    {/* 路由区域 */}
                    <div className="System_router">
                        {/* 导航栏 */}
                        <nav>
                            <ul>
                                <li className="nav-item">
                                    <NavLink activeClassName="selected" exact to="/"><ProjectIcon size={16} />管理首页</NavLink>
                                </li>
                                <li className="nav-item">
                                    <NavLink activeClassName="selected" to="/invinfo"><FileSubmoduleIcon size={16} />库存信息管理</NavLink>
                                </li>
                                <li className="nav-item">
                                    <NavLink activeClassName="selected" to="/infoebtry"><PencilIcon size={16} />商品信息录入</NavLink>
                                </li>
                                <li className="nav-item">
                                    <NavLink activeClassName="selected" to="/administrator"><PeopleIcon size={16} />联系管理员</NavLink>
                                </li>
                                <li >
                                        <button 
                                        onClick={this.props.Orthos}
                                        ><SignOutIcon size={16} />退出登录</button> 
                                    </li>
                            </ul>
                        </nav>
                    </div>
                    {/* 路由显示区域 */}
                    <div className="router_show">
                        <Switch>
                            <Route path="/" exact component={Home} />
                            <Route path="/invinfo" component={InventoryInfo} />
                            <Route path="/infoebtry" component={InfoEbtry} />
                            <Route path="/administrator" component={Administrator} />
                        </Switch>
                    </div>
                </div>
            </div>
            </Router>
        )
    }
}
